[Flex]データグリッド内の単純なアイテムレンダラーでTABキーを押下してフォーカスを移動する

データグリッドでアイテムエディターを使用すると、TABキーを押下したときに次のコントロールに遷移してくれます。

しかし、アイテムレンダラーを使用すると、TABキーを押下しても次のコントロールに遷移してくれません。

どうすれば実現できるかを調べたところ、単純なアイテムレンダラーであれば、アイテムエディターのようにTABキーを押下したときに次のコントロールに遷移させる方法は、簡単なプロパティの設定だけで実現できることがわかりました。

以下、その方法を簡単にご紹介します。

①データグリッドコントロールの editable プロパティを trueにします。

<mx:DataGrid editable="true">

※このプロパティを true に設定すると、データグリッド内の各列に アイテムエディターが作成されるので、不要な列は DataGridColumnの editable プロパティを false に設定します。

②アイテムエディターのインスタンスが必須ですので、アイテムレンダラーとアイテムエディターが同じ場合は、DataGridColumnの rendererIsEditor プロパティを false に設定します。

    <mx:DataGridColumn headerText="列２" dataField="name"
        rendererIsEditor="true" itemRenderer="mx.controls.TextInput"/>

簡単なサンプルを下記に示します。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:local="*">
	<mx:Script>
		<![CDATA[
			[Bindable]
			private var dgData:Array = [
			{no:1, name:'氏名１', age:21, address:'住所１'},
			{no:2, name:'氏名２', age:22, address:'住所２'},
			{no:3, name:'氏名３', age:23, address:'住所３'},
			{no:4, name:'氏名４', age:24, address:'住所４'},
			{no:5, name:'氏名５', age:25, address:'住所５'}
			];
		]]>
	</mx:Script>
	
	<mx:DataGrid dataProvider="{dgData}" editable="true">
		<mx:columns>
			<mx:DataGridColumn headerText="列１" dataField="no" editable="false"/>
			<mx:DataGridColumn headerText="列２" dataField="name"
				rendererIsEditor="true" itemRenderer="mx.controls.TextInput"/>
			<mx:DataGridColumn headerText="列３" dataField="address"
				rendererIsEditor="true" itemRenderer="mx.controls.TextInput"/>
		</mx:columns>
	</mx:DataGrid>
</mx:Application>

単純な アイテムレンダラー（コンテナが無いコンポーネント）であれば、これだけです。一見したら何もしていないようにも見えます(^^;)

この方法は、FXUGのフォーラム（⇒ここ）で見つけました。

しかし、コンテナがあるアイテムレンダラー（１つのアイテムレンダラー内に複数のコンポーネントがある）のように、まずアイテムレンダラー内だけでフォーカス遷移し、最後のコンポーネントでTABキーを押下されたときに、次のアイテムレンダラーに移るといったような複雑なことを実現するには、少々アイテムレンダラーに使用するコンポーネントをカスタマイズする必要があります。

それについては、次回ご紹介します。